<!DOCTYPE html>
<html>
<head>
    <title>Flat Admin V.2 - Free Bootstrap Admin Templates</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <#scripts />
    <!-- Fonts -->
    
</head>

<body class="flat-blue">
    <div class="app-container">
        <div class="row content-container">
            <#menu code="ui-1" pcode="ui" />
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top" id="main">
                	<template>
					  <el-table :data="tableData">
					    <el-table-column type="expand">
					      <template slot-scope="props">
					        <el-form label-position="left" inline class="demo-table-expand">
					          <el-form-item label="用户id">
					            <span>{{ props.row.id }}</span>
					          </el-form-item>
					          <el-form-item label="用户名称">
					            <span>{{ props.row.name }}</span>
					          </el-form-item>
					          <el-form-item label="用户年龄">
					            <span>{{ props.row.age }}</span>
					          </el-form-item>
					        </el-form>
					      </template>
					    </el-table-column>
					    <el-table-column label="用户ID" prop="id"></el-table-column>
					    <el-table-column label="用户名称" prop="name"></el-table-column>
					    <el-table-column label="用户年龄" prop="age"></el-table-column>
					    <el-table-column label="操作">
					      <template slot-scope="scope">
					        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					      </template>
					    </el-table-column>
					  </el-table>
					</template>
                </div>
            </div>
        </div>
        <#footer />
	<div>
            <!-- Javascript Libs -->
	<script>
		var vm = new Vue({
		    el: '#main',
		    data: {
				pageno:1,
	    		tableData: [],
	    		total:0,
	    		pagesize:5,
	    		pagesizes:[5,10,15]
		    },
		 
		    // 点击菜单使用的函数
		    methods: {
		        onload:function(){
		        	this.getTableData();
		        },
		    	handleSizeChange(val) {
		          console.log('每页'+ val +'条');
		          vm.pagesize = val;
		          this.getTableData();
		        },
		        handleCurrentChange(val) {
		          console.log('当前页: '+ val );
		          vm.pageno = val;
		          this.getTableData();
		        },
		        handleEdit(index,row){
		        	  console.log("编辑")
		          	  console.log(row)
		        },
		        handleDelete(index,row){
		      	  console.log("删除")
		      	  console.log(row)
		        },
		        getParams:function(){
		        	var params = new URLSearchParams();
		        	params.append('pageno', vm.pageno);       //你要传给后台的参数值 key/value
		        	params.append('pagesize', vm.pagesize);
		        	return params;
		        },
		   		getTableData:function(){
		        	axios.post('/list', vm.getParams()).then(function (response) {
		            	var data = response.data.data;
		            	vm.pagesize = data.pagesize;
		            	vm.pageno = data.pageno;
		            	vm.total = data.totalCount;
		                vm.tableData = data.list;
		              }).catch(function (error) {
		                console.log(error);
		              });
		   		}
		    }
		});
		vm.onload();
	</script>
</body>

</html>
